<template>
  <header id="site-header" class="">
  <div class="container">
      <nav class="navbar navbar-expand-lg stroke p-0">
          <h1> <a class="navbar-brand" href="javascript:void(0)"  @click="back()">
                  <span class="iconfont icon-fanhui"></span> Join us
              </a></h1>   
      </nav>
  </div>
</header>

<div class="w3l-contact-breadcrumb w3l-search-results py-5 text-center">
    <div class="container py-lg-4 py-md-3">
        <h3 class="title-big mb-4">加入我们</h3>
        <p>我们想为您提供一个很棒的体验，这就是为什么我们希望听到您的声音。您的反馈有助于我们为您带来更多您喜爱的活动和您期望的服务。</p>
    </div>
</div>

<!-- contacts -->
<section class="w3l-contact-7 pt-5" id="contact">
    <div class="contacts-9 pt-lg-5 pt-md-4">
        <div class="container">
            <div class="top-map">
                <div class="row map-content-9">
                    <div class="col-lg-8">
                        <p class="mb-4">您的个人信息将不会泄露。欢迎加盟云记竹升面</p>
                        <form  method="post" class="">
                            <div class="form-grid">
                                <div class="input-field">
                                    <label> 姓名</label>
                                    <input type="text" name="w3lName" id="w3lName" placeholder="" required="">
                                </div>
                                <div class="input-field">
                                    <label> 手机</label>
                                    <input type="text" name="w3lPhone" id="w3lPhone" placeholder="" required="">
                                    
                                </div>
                                
                                <div class="input-field">
                                    <label> 城市/县城</label>
                                    <input type="text" name="w3lSubject" id="w3lSubject" placeholder="">
                                </div>
                                <div class="input-field">
                                    <label> 预计何时加盟</label>
                                    <input type="text" name="w3lSubject" id="w3lSubject" placeholder="">
                                </div>
                                <div class="input-field">
                                    <label> 准备投入资金</label>
                                    <input type="text" name="w3lSubject" id="w3lSubject" placeholder="">
                                </div>
                                <div class="input-field">
                                    <label>预计投入面积</label>
                                    <input type="text" name="w3lSubject" id="w3lSubject" placeholder="">
                                </div>
                                <div class="input-field ">
                                    <label>是否已有店面</label>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                    </div>
                                </div>
                            </div>
                            <div class="input-field mt-4">
                                <label>想对我们说的话</label>
                                <textarea name="w3lMessage" id="w3lMessage" placeholder=""></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-style mt-3 ms-3 mb-5">发送</button>
                        </form>
                    </div>
                    <div class="col-lg-4 cont-details text-center">
                        
                           <div class="col-xs-12 col-sm-12 col-md-12 py-3 ml-4">
                                 <div id="map" class="wow zoomIn"></div>
                            </div>
                      
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
</template>

<script setup>
import { ref,onMounted} from "vue";
import { useRouter } from 'vue-router'
import '../assets/css/contact.css'

const router = useRouter()


// 返回上一页
const back=()=>{
    
    router.push({ path: '/' })
}

onMounted(()=>{
    
    let Bmap = window.BMap;
    let map = new Bmap.Map("map");
    var point = new BMap.Point(116.680001, 23.476277); // 创建点坐标
    map.centerAndZoom(point,20);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    var opts = {
      width: 50, // 信息窗口宽度
      height: 10, // 信息窗口高度
      title: "云记竹升面（龙光店）", // 信息窗口标题
    };
    var infoWindow = new BMap.InfoWindow(
      "潮州市潮安区城区彩文路东侧、龙桥路南侧阳光水岸二栋11号铺",
      opts
    ); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
})
</script>

<style>
#map {
    width: 100%;
    height: 400px;
    margin-left: 2rem;
    margin-top: 8rem; 
     box-shadow:5px 5px 10px 5px #ccc;
  }

@media screen and (max-width:720px) {
    #map{
       margin-left: 0; 
    }
}  
</style>